<template>
	<view class="content">
		<view class="form-area">
			<u--form labelPosition="left" :model="form" ref="uForm" labelWidth="100">
				<u-form-item label="类型" prop="type" borderBottom required @click="showType = true">
					<u--input v-model="form.typeName" readonly border="none" placeholder="请选择分类" @click=""></u--input>
				</u-form-item>
				
				<u-form-item label="银行" prop="bank" borderBottom v-if="form.type==='2' || form.type==='3'">
					<u--input v-model="form.bank" border="none" placeholder="请输入银行"></u--input>
				</u-form-item>
				<u-form-item label="户名" prop="remarks" borderBottom required v-if="form.type==='1' || form.type==='2' || form.type==='3' || form.type==='5'">
					<u--input v-model="form.h_name" border="none" placeholder="请输入备注"></u--input>
				</u-form-item>
				<u-form-item label="账号" prop="bank_account" borderBottom required v-if="form.type==='2' || form.type==='3' || form.type==='4'">
					<u--input v-model="form.bank_account" border="none" placeholder="请输入银行账号"></u--input>
				</u-form-item>
				<u-form-item label="账单日" prop="z_data" borderBottom v-if="form.type==='3'">
					<u--input v-model="form.z_data" border="none" placeholder="请输入账单日，如：1"></u--input>
					<view class="" slot="right">
						日
					</view>
				</u-form-item>
				<u-form-item label="还款日" prop="h_data" borderBottom v-if="form.type==='3'">
					<u--input v-model="form.h_data" border="none" placeholder="请输入还款日，如：15"></u--input>
					<view class="" slot="right">
						日
					</view>
				</u-form-item>
				<u-form-item label="平台" prop="platform" borderBottom v-if="form.type==='4'">
					<u--input v-model="form.platform" border="none" placeholder="如：微信"></u--input>
				</u-form-item>
				<u-form-item label="余额" prop="balance" borderBottom >
					<u--input v-model="form.balance" border="none" placeholder="请输入备注"></u--input>
				</u-form-item>
				<u-form-item label="备注" prop="remarks" borderBottom>
					<u--input v-model="form.remarks" border="none" placeholder="请输入备注"></u--input>
				</u-form-item>
				<u-form-item label="是否默认" prop="id_remarks" borderBottom>
					<u-switch v-model="form.id_remarks" activeValue="1" inactiveValue="0"></u-switch>
				</u-form-item>
				<u-form-item label="照片" prop="image" borderBottom>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="fileNumber"
						width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</u-form-item>
			</u--form>
		</view>
		<view class="" style="margin-top: 60rpx;padding: 0 24rpx;">
			<u-button text="保存" @click="submit" type="success"></u-button>
		</view>
		<view class="" style="margin-top: 20rpx;padding: 0 24rpx;margin-bottom: 20rpx;">
			<u-button text="删除" @click="handleDel" type="error"></u-button>
		</view>
		
		<u-action-sheet :show="showType" :actions="actions" title="请选择类型" @close="showType = false" @select="typeSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		getSzaccountInfo,saveSzaccount,deleteSzaccount
	} from '@/api/ledger.js'
	export default {
		data() {
			return {
				form: {
					type:'',
					h_name: '',
					balance: '',
					remarks: '',
					id_remarks: '0',
					image: '',
					bank: '',
					bank_account: '',
					z_data: '',
					h_data: '',
					platform: ''
				},
				showType: false,
				actions: [{
						type: '1',
						name: '现金',
					},
					{
						type: '2',
						name: '储蓄卡',
					},
					{
						type: '3',
						name: '信用卡',
					},
					{
						type: '4',
						name: '网络账户',
					},
					{
						type: '5',
						name: '应收/应付',
					},
				],
				fileList:[],
				fileNumber:1
			}
		},
		onLoad(query) {
			console.log('路径参数：', query)
			this.getInfo(query.id)
		},
		onShow() {

		},
		methods: {
			getInfo(id){
				getSzaccountInfo({id:id}).then(res=>{
					console.log(res.data.data)
					res.data.data.typeName = this.actions.find(a=>a.type == res.data.data.type)?.name
					res.data.data.type=res.data.data.type+''
					res.data.data.id_remarks = res.data.data.id_remarks + ''
					this.form = res.data.data
					if(this.form.image) {
						this.fileList = this.form.image.split(',').map(url => ({
							url: url,
							// 其他可选属性
							status: 'success',
							message: '上传成功'
						}));
					}
					
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = event.file;
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$uploadFilePromise(lists[i].url);
					let item = this.fileList[fileListLen];
					this.fileList.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result.fullurl,
							img: result.url
						})
					);
					fileListLen++;
				}
			},
			submit() {
				let form = this.form
				if(!this.form.type){
					uni.showToast({
						title: '请选择账户类型',
						icon: 'none'
					})
					return;
				}
				if(form.type==='1' || form.type==='2' || form.type==='3' || form.type==='5'){
					if (!this.form.h_name) {
						uni.showToast({
							title: '请输入户名',
							icon: 'none'
						})
						return;
					}
				}
				if(form.type==='2' || form.type==='3' || form.type==='4') {
					if (!this.form.bank_account) {
						uni.showToast({
							title: '请输入账号',
							icon: 'none'
						})
						return;
					}
				}
				this.form.image = this.fileList.map(f=>f.url).join(',')
				saveSzaccount(this.form).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						complete() {
							uni.navigateBack()
						}
					})
				})
			},
			handleDel(){
				deleteSzaccount({id:this.form.id}).then(res=>{
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						complete() {
							uni.navigateBack()
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		
	}
	.form-area {
		background-color: #fff;
		padding: 0 24rpx;
	}
</style>